<template>
  <div class="">
<!--    顶部导航条-->
    <myheader></myheader>
<!--    中间内容-->
    <div class="main">
<!--      时间线-->
      <div class="time">
        <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5" >
          <div class="col" >
            <h2 class="second_title">考研日历</h2>
          </div>
        </div>

        <div class="m-4" style="font-size: 20px;font-weight: bold">
          <el-steps :active="8" align-center direction="horizontal">
            <el-step v-for="item in list" :key="item.index"  :title="item.mouth" :description="item.action" :status="item.status ? 'success' : 'wait'"></el-step>
            <el-step title="次年2-5月" description="考研复试" tatus=""></el-step>
          </el-steps>
        </div>
      </div>
      <!-- 新闻 -->
      <div class="row" style="padding: 60px 150px;">
<!--        走马灯-->
        <div class="col-md-6 column">
          <div class="block">
            <el-carousel height="470px">
              <el-carousel-item v-for="item in imgs" :key="item">
                <img :src="item" alt="..." style="border-radius: 8px;
                box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);">
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
<!--        列表-->
        <div class="col-md-6 column">
          <div class="list-group"  style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
            <a href="#" class="list-group-item list-group-item-action" v-for="(kaoyan) in all_info" :key=kaoyan.pee_id
               @click="change_pee(kaoyan.pee_id)">
              <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">{{ kaoyan.pee_title }}</h5>
                <small>{{ kaoyan.pee_release_time}}</small>
              </div>
              <div class="content">
                <p class="mb-1">{{ kaoyan.pee_content }}</p>
              </div>
<!--              <small>And some small print.</small>-->
            </a>
          </div>
        </div>
      </div>
<!--      考研资讯-->
      <div class=""
           style="background-color: white;padding: 70px 250px;margin:30px -100px">
        <div class="row">
          <div class="col-md-12 column">
            <div class="row page-header border-bottom">
              <div class="col-md-8">
                <h1>
                  <div type="button" class="btn btn-lg text-white" style="background-color: #B7C1AC" >
                    考研资讯
                  </div>
                  <span style="font-size: 26px">&nbsp;&nbsp;&nbsp;GEGISTER&nbsp;&nbsp;&nbsp;INFORMATION</span>
                </h1>
              </div>
              <div class="col-md-4">
                <div class="btn more_btn"
                   type="btn"
                   @click="change_info">
                  More
                </div>
              </div>
            </div>
            <div class="row mt-4">
              <div class="col-md-3 column col-lg-3">
                <div class="card" style="width: 18rem;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
                  <ul class="guide_list list-group list-group-flush">
                    <li class="list-group-item" style="font-size: 24px;color: black;">报考指南</li>
                    <li class="list-group-item">确定方向</li>
                    <li class="list-group-item">选择专业</li>
                    <li class="list-group-item">选择学校</li>
                    <li class="list-group-item">专业报名</li>
                    <li class="list-group-item">考研初试</li>
<!--                    <li class="list-group-item">考研复试</li>-->
                  </ul>
                </div>
              </div>
              <div class="tab_info col-md-9 column col-lg-9">
                <el-tabs type="border-card" >
                  <el-tab-pane>
                    <span slot="label" class="tabfontClass">最热资讯</span>
                    <div v-for="(info) in high_info" :key=info.pee_id class="kaoyan text item border-bottom pb-3 pt-3">
                      <div class="row">
                        <div class="afontclass col-md-9 pl-3">
                          <router-link :to="{path:'/KaoYan_Frame/One_Info',query:{PeeId:info.pee_id}}">
                            <a class="mb-1" href="javascript:void(0);">
                              · {{info.pee_title}}</a>
                          </router-link>
                        </div>
                        <div class="col-md-3">
                          {{ info.pee_release_time }}
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane>
                    <span slot="label" class="tabfontClass">考研信息</span>
                    <div v-for="(info) in kaoyan_info" :key=info.pee_id class="kaoyan text item border-bottom pb-3 pt-3">
                      <div class="row">
                        <div class="afontclass col-md-9 pl-3">
                          <router-link :to="{path:'/KaoYan_Frame/One_Info',query:{PeeId:info.pee_id}}">
                            <a class="mb-1" href="javascript:void(0);" >
                              · {{info.pee_title}}</a>
                          </router-link>
                        </div>
                        <div class="col-md-3">
                          {{ info.pee_release_time }}
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane >
                    <span slot="label" class="tabfontClass">招生信息</span>
                    <div v-for="(info) in zhaoshen_info" :key=info.pee_id class="kaoyan text item border-bottom pb-3 pt-3">
                      <div class="row">
                        <div class="afontclass col-md-9 pl-3">
                          <router-link :to="{path:'/KaoYan_Frame/One_Info',query:{PeeId:info.pee_id}}">
                            <a class="mb-1" href="javascript:void(0);">
                              · {{info.pee_title}}</a>
                          </router-link>
                        </div>
                        <div class="col-md-3">
                          {{ info.pee_release_time }}
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane>
                    <span slot="label" class="tabfontClass">考研日报</span>
                    <div v-for="(info) in daily_info" :key=info.pee_id class="kaoyan text item border-bottom pb-3 pt-3">
                      <div class="row">
                        <div class="afontclass col-md-9 pl-3">
                          <router-link :to="{path:'/KaoYan_Frame/One_Info',query:{PeeId:info.pee_id}}">
                            <a class="mb-1" href="javascript:void(0);" >
                              · {{info.pee_title}}</a>
                          </router-link>
                        </div>
                        <div class="col-md-3">
                          {{ info.pee_release_time }}
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane>
                    <span slot="label" class="tabfontClass">特别推荐</span>
                    <div v-for="(info) in recommend_info" :key=info.pee_id class="kaoyan text item border-bottom pb-3 pt-3">
                      <div class="row">
                        <div class="afontclass col-md-9 pl-3">
                          <router-link :to="{path:'/KaoYan_Frame/One_Info',query:{PeeId:info.pee_id}}">
                            <a class="mb-1" href="javascript:void(0);">
                              · {{info.pee_title}}</a>
                          </router-link>
                        </div>
                        <div class="col-md-3">
                          {{ info.pee_release_time }}
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
                <div class="mian_info">
                  <router-view></router-view>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--      闲置转卖-->
      <div class="row" style="padding: 30px 150px">
        <div class="col-md-12 column">
          <div class="row mt-4">
            <div class="col-md-6 column">
              <div class="row page-header border-bottom">
                <div class="col-md-8">
                  <h1>
                    <div type="button" class="btn btn-lg text-white" style="background-color: #B7C1AC">
                      闲置转卖
                    </div>
                    <span style="font-size: 26px">&nbsp;&nbsp;&nbsp;IDLE&nbsp;&nbsp;&nbsp;RESALE</span>
                  </h1>
                </div>
                <div class="col-md-4">
                  <div class="btn more_btn"
                       type="btn"
                       @click="change_resale">
                    More
                  </div>
                </div>
              </div>
              <div class="mt-4">
                <el-tabs type="border-card">
                  <el-tab-pane >
                    <span slot="label" class="tabfontClass">最新发布</span>
                    <div v-for="(idle) in new_idle" :key=idle.idle_item_id class="kaoyan text item border-bottom pb-3 pt-3">
                      <div class="row">
                        <div class="afontclass col-md-8 pl-3">
                          <router-link :to="{path:'/Resale'}">
                            <a class="mb-1" href="javascript:void(0);">
                              · {{idle.idle_item_name}}</a>
                          </router-link>
                          <small class="pl-3" style="color: #6b6e71;font-size: 15px">{{idle.user_name}}</small>
                        </div>
                        <div class="col-md-4">
                          {{ idle.idle_item_time }}
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <div class="col-md-6 column ">
              <div class="row page-header border-bottom">
                <div class="col-md-10">
                  <h1>
                    <div type="button" class="btn btn-lg text-white" style="background-color: #B7C1AC">
                      交流讨论社区
                    </div>
                    <span style="font-size: 26px">&nbsp;&nbsp;&nbsp;DICUSSION&nbsp;&nbsp;&nbsp;COMMUNITY</span>
                  </h1>
                </div>
                <div class="col-md-2">
                  <div class="btn more_btn"
                       type="btn"
                       @click="change_discussion">
                    More
                  </div>
                </div>

              </div>
              <div class="mt-4">
                <el-tabs type="border-card">
                  <el-tab-pane>
                    <span slot="label" class="tabfontClass">最新发布</span>
                    <div v-for="(post) in all_post" :key=post.post_id class="kaoyan text item border-bottom pb-3 pt-3">
                      <div class="row">
                        <div class="afontclass col-md-8 pl-3">
                          <router-link :to="{path:'/Discussion_Frame/One_Post_Main/One_Post',query:{post_id:post.post_id}}">
                            <a class="mb-1" href="javascript:void(0);" >
                              · {{post.post_title}}</a>
                          </router-link>
                        </div>
                        <div class="col-md-4">
                          {{ post.post_time }}
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane>
                    <span slot="label" class="tabfontClass">求助问答</span>
                    <div v-for="(post) in question_post" :key=post.post_id class="kaoyan text item border-bottom pb-3 pt-3">
                      <div class="row">
                        <div class="afontclass col-md-8 pl-3">
                          <router-link :to="{path:'/Discussion_Frame/One_Post_Main/One_Post',query:{post_id:post.post_id}}">
                            <a class="mb-1" href="javascript:void(0);" >
                              · {{post.post_title}}</a>
                          </router-link>
                        </div>
                        <div class="col-md-4">
                          {{ post.post_time }}
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane>
                    <span slot="label" class="tabfontClass">考研经验</span>
                    <div v-for="(post) in experience_post" :key=post.post_id class="kaoyan text item border-bottom pb-3 pt-3">
                      <div class="row">
                        <div class="afontclass col-md-8 pl-3">
                          <router-link :to="{path:'/Discussion_Frame/One_Post_Main/One_Post',query:{post_id:post.post_id}}">
                            <a class="mb-1" href="javascript:void(0);">
                              · {{post.post_title}}</a>
                          </router-link>
                        </div>
                        <div class="col-md-4">
                          {{ post.post_time }}
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane>
                    <span slot="label" class="tabfontClass">日常生活</span>
                    <div v-for="(post) in life_post" :key=post.post_id class="kaoyan text item border-bottom pb-3 pt-3">
                      <div class="row">
                        <div class="afontclass col-md-8 pl-3">
                          <router-link :to="{path:'/Discussion_Frame/One_Post_Main/One_Post',query:{post_id:post.post_id}}">
                            <a class="mb-1" href="javascript:void(0);">
                              · {{post.post_title}}</a>
                          </router-link>
                        </div>
                        <div class="col-md-4">
                          {{ post.post_time }}
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
            <router-view></router-view>
          </div>
        </div>
      </div>
<!--      历年国家分数线-->
      <div class="mt-5 mb-5"  style="padding: 80px 150px;background-color: white">
        <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5" >
          <div class="col" >
            <h2 class="second_title pb-3 border-bottom">历年国家分数线</h2>
          </div>
        </div>
        <div class="div-inline row mt-5 align-items-center text-center pl-lg-5" style="margin-left: 40px;" v-for="year in years" :key="year.id">
          <div class="btn rounded-circle btn-lg mt-3" style="background-color: #B7C1AC;color: white" @click="change_grades()">{{year.name}}</div>
        </div>
      </div>
      <!-- 学长学姐说-->
      <div class="mt-3" style="padding: 0px 150px">
        <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5 mt-5" >
          <div class="col" >
            <h2 class="second_title">学 长 学 姐 说</h2>
          </div>
        </div>
        <div class="carousel mt-5 ml-5" >
          <el-carousel :interval="4000" type="card" height="680px">
            <el-carousel-item v-for="(item) in experience_post" :key="item.post_id">
              <div class="card" style="width: 38rem;">
                <img class="card-img-top" alt="..." src="../assets/test/6.jpg">
                <div class="card-body">
                  <h4 class="card-title" @click="change_post(item.post_id)">{{ item.post_title }}</h4>
                  <p style="font-size: 17px"><i class="fa fa-user pr-2" aria-hidden="true" ></i>{{item.user_name}}</p>
                  <div class="content">
                    <p class="card-text">{{item.post_content}}</p>
                  </div>
                  <div class="pt-3 pb-3">
                    <a href="javascript:void(0);" class="btn" style="background-color: #B7C1AC;color: white;font-size: 20px"
                      @click="change_post(item.post_id)">
                      Go somewhere
                    </a>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
<!--      友情链接-->
      <div class="to_a mt-3 " style="background-color: white;height: 350px">
        <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5 mt-5" >
          <div class="col mt-5" >
            <h2 class="second_title border-bottom pb-3">友 情 链 接</h2>
          </div>
        </div>
        <div class="text-center">
          <div class="click_url p-4">
            <div class="">
              <el-tooltip class="item" effect="dark" content="打开该网址" placement="top">
                <a href="#" @click="skip_site_yz()">研招网</a>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="打开该网址" placement="top">
                <a href="#" @click="skip_site_neea()">中国教育考试网</a>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="打开该网址" placement="top">
                <a href="#" @click="skip_site_china()">中国考研信息网</a>
              </el-tooltip>
            </div>
            <div class="pt-3">
              <el-tooltip class="item" effect="dark" content="打开该网址" placement="bottom">
                <a href="#" @click="skip_site_gs()">厦门大学研究生院</a>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="打开该网址" placement="bottom">
                <a href="#" @click="skip_site_xujc()">厦门大学嘉庚学院图书馆备考联盟</a>
              </el-tooltip>
            </div>

          </div>
        </div>


      </div>
    </div>
    <!--    底部导航条-->
    <myfooter></myfooter>
  </div>
</template>

<script>
import myfooter from './myfooter'
import myheader from './myheader'
import img1 from '@/assets/test/7.jpg'
import img2 from '@/assets/test/13.jpg'
import img3 from '@/assets/test/12.jpg'
import img4 from '@/assets/test/11.jpg'
import img5 from '@/assets/test/6.jpg'
import img6 from '@/assets/test/3.jpg'
import img7 from '@/assets/test/15.jpg'
import img8 from '@/assets/test/16.jpg'
import {getNewPeeInfo,getNewIdleInfo,getMainNewPostInfo} from "@/api/Main";
import websocket from "@/utils/websocket";


export default {
   name: "Main",
   components:{
     myfooter,
     myheader
   },
   data() {
     return {
      activeName: 'first',
      imgs:[
        img1,
        img2,
        img3,
        img4,
        img5,
        img6,
        img7,
        img8
      ],
      nowYear:0,
      nowMouth:0,
      //数据
      list:[
        {
          action: "确定考研方向",
          mouth: "1月",
          sign:1,
          status: 0,
        },
        {
          action: "发布考研大纲",
          mouth: "7-8月",
          sign:7,
          status:0,
        },
        {
          action: "发布招生简章",
          mouth: "9-10月",
          sign:9,
          status: 0,
        },
        {
          action: "开通报名入口",
          mouth: "10-11月",
          sign:10,
          status: 0,
        },
        {
          action: "现场确认",
          mouth: "11月",
          sign:11,
          status: 0,
        },
        {
          action: "打印准考证",
          mouth: "12月",
          sign:12,
          status: 0,
        },
        {
          action: "考研初试",
          mouth: "12月",
          sign:12,
          status: 0,
        },
        // {
        //   action: "考研复试",
        //   mouth:"次年2-5月",
        //   sign:0,
        //   status: 0,
        // },
      ],
      param: {
        key: '',
        page: 1,
        limit: 4,
      },
       //  最新考研资讯
       all_info:[],
       kaoyan_info:[],
       daily_info:[],
       recommend_info:[],
       zhaoshen_info:[],
       new_idle:[],
       all_post:[],
       question_post:[],
       experience_post:[],
       high_info:[],
       life_post:[],
     //年份分数线
       years:[
         {
           id:'1',
           name:'2016',
           label:'2016'
         },
         {
           id:'2',
           name:'2017',
           label:'2017'
         },
         {
           id:'3',
           name:'2018',
           label:'2018'
         },
         {
           id:'4',
           name:'2019',
           label:'2019'
         },
         {
           id:'5',
           name:'2020',
           label:'2020'
         },
         {
           id:'6',
           name:'2021',
           label:'2021'
         },
         {
           id:'7',
           name:'2022',
           label:'2022'
         },
         {
           id:'8',
           name:'2023',
           label:'2023'
         },



       ],


     };
  },
   methods: {
     //跳转交流讨论社区
     change_discussion(){
       if(this.$router.history.current.path !='/Discussion_Frame/Discussion_Main/All_Discussion'){
         this.$router.push({path:'/Discussion_Frame/Discussion_Main/All_Discussion'});
       }
     },
     //跳转闲置物品转卖
     change_resale(){
       if(this.$router.history.current.path !='/Resale/All_Resale'){
         this.$router.push({path:'/Resale/All_Resale'});
       }
     },
     //跳转考研资讯
     change_info(){
       if(this.$router.history.current.path !='/KaoYan_Frame/Information'){
         this.$router.push({path:'/KaoYan_Frame/Information'});
       }
     },
     skip_site_china() {
       window.open("http://www.chinakaoyan.com/", '_blank');
     },
     skip_site_xujc(){
       window.open("http://bklm.xujc.cn/", '_blank');
     },
     skip_site_gs() {
       window.open("https://gs.xmu.edu.cn/", '_blank');
     },
     skip_site_neea() {
       window.open("https://www.neea.edu.cn/", '_blank');
     },
     skip_site_yz(){
       window.open("https://yz.chsi.com.cn/", '_blank');
     },
    // 跳转单条信息
    change_grades(){
      if(this.$router.history.current.path !='/College_Grades'){
        this.$router.push({path:'/College_Grades'});
      }
    },
    change_post(post_id){
      if(this.$router.history.current.path !='/KaoYan_Frame/One_Info'){
        this.$router.push({
          path:'/Discussion_Frame/One_Post_Main/One_Post',
          query:{post_id:post_id}
        });
      }
    },
    change_pee(pee_id){
      if(this.$router.history.current.path !='/KaoYan_Frame/One_Info'){
        this.$router.push({
          path:'/KaoYan_Frame/One_Info',
          query:{PeeId:pee_id}
        });
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //获取信息
     init(){
      //考研资讯
      getNewPeeInfo({
        page:this.param.page,
        limit:this.param.limit
      }).then(res=>{

        //考研资讯
        this.all_info=res.data.all_info;
        this.kaoyan_info=res.data.kaoyan_info;
        this.daily_info=res.data.daily_info;
        this.recommend_info=res.data.recommend_info;
        this.zhaoshen_info=res.data.zhaoshen_info;
        this.high_info=res.data.high_info;

      });

      //闲置物品信息
      getNewIdleInfo({
        page:this.param.page,
        limit:this.param.limit
      }).then(res=>{
        //考研资讯
        this.new_idle=res.data.new_idle;
      });

      //帖子信息
      getMainNewPostInfo({
        page:this.param.page,
        limit:this.param.limit
      }).then(res=>{
        //交流讨论社区  帖子
          this.all_post = res.data.all_post;
          this.question_post = res.data.question_post;
          this.experience_post = res.data.experience_post;
          this.life_post = res.data.life_post;
      });


    },
  },
  mounted() {
    let myDate = new Date();
    this.nowYear=myDate.getFullYear(); //获取完整的年份(4位,1970-????)
    this.nowMouth=myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
    // console.log(this.nowYear);
    // console.log(this.nowMouth);
    // console.log(this.list.length);
    // console.log(this.list);
    for(let i=0;i<=this.list.length-2;i++)
    {
      if(this.nowMouth>=this.list[i].sign)
      {
        this.list[i].status=1;
        // console.log(this.list[i].sign);
      }
    }

  },
  created() {
     let _this=this;
     _this.init();

    //绑定
    // let ws = websocket.getWebSocket();
    // if(window.sessionStorage.getItem('token') || window.sessionStorage.getItem('token')!=null || window.sessionStorage.getItem('token')!==''|| window.sessionStorage.getItem('token')!==undefined){
    //   ws.send( JSON.stringify({type:"bind",uid: window.sessionStorage.getItem('token') }));
    // }

  }



}
</script>

<style scoped>
.main
{
  /*padding-left: 100px;*/
  /*padding-right: 100px;*/
  /*padding-top: 30px;*/
  margin-bottom: -100px;
}
/*各部分小标题*/
.second_title
{
  font-weight: bold;
}

/*当前步骤数横线样式设置*/
   .el-step__line-inner{
     width: 50% !important;
     border-width: 1px !important;
   }
/*当前步骤数圆圈样式设置*/
.el-step__icon.is-text{
     background: #409eff;
     color:#fff;
}
h2
{
  color: #223F23;
}
#container *{ position:relative;}
/*考研资讯内容简写*/
.content p{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  letter-spacing:3px;
  color: #6b6e71;
}
.list-group-item:hover{
  background-color:#B7C1AC;
}
/*a标签样式*/
.afontclass a{
  font-size: 18px;
  color: #6b6e71;
  /*text-decoration:none;*/
}
.afontclass a:hover{
  color:#B7C1AC;
  font-weight: bold;
  /*text-decoration:none;*/
}
/deep/.tabfontClass{
  padding: 20px;
  font-size:19px;
  font-weight: bold;
  font-family: Microsoft Yahei;
}
/*报考指南字体样式*/
.guide_list li{
  color: #6b6e71;
  font-size: 18px;
}
.guide_list li:hover{
  font-weight: bold;
}
/*学长学姐说样式*/
.card-title{
  color: #3b485e;
}
.card-title:hover{
  font-weight: bold;
  /*color:#B7C1AC;*/
}
.div-inline{
  display:inline
}
/*友情链接样式*/
.click_url a{
  font-size: 22px;
  color: #5b5b5b;
  font-weight: bold;
  padding: 20px;
}
.click_url a:hover{
  color: #0f5da2;
}
/*更多按钮样式*/
.more_btn{
  float:right;
  font-size: 15px;
  margin-top: 10px;
  background-color:white;
  color: #B7C1AC;
  font-weight: bold;
  border-color: #B7C1AC;
  border-width: 3px;
  border-radius: 10px;
}
.more_btn:hover{
  background-color:#B7C1AC;
  color: white;
}
</style>
